<template>
	<!-- <view class="">
		<tree-list :typeList="typeList" :subTypeList="subTypeList"></tree-list>
	</view> -->
	<view class="container">
		<view class="page-body">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px;border-right:solid 1px #E0E0E0'">
				<view class="nav-left-item" @click="typeClickMain(item,index)" :key="index" :class="index==typeActive?'active':''"
				 v-for="(item,index) in typeList">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'"
			 scroll-with-animation>
				<view  class="nav-right-item" v-for="(item,index) in subTypeList" :key="index" @click="goProduct(item.id)">
					<image :src="item.thumbnail" />
					<view style="display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;overflow: hidden;">{{item.name}}</view>
				</view>
	
			</scroll-view>
		</view>
	</view>
</template>

<script>
	// import treeList from '@/components/shopComponents/type/tree-list.vue'
	import mockData from '@/data/type.js'
	export default {
		data() {
			return {
				typeList:[],
				subTypeList:[],
				height: 0,
				typeActive: 0,
				scrollTop: 0,
				scrollHeight: 0,
				
				page:1,
				baseURL:this.$API.baseURL,
				typeId : '',
			}
		},
		created: function() {
			this.height = uni.getSystemInfoSync().windowHeight-60;
		},
		onLoad(e){
			
			if(e.id){
				this.typeId = e.id;
			}
		},
		onReady(e) {
			// this.typeList=mockData.typeList;
			// this.subTypeList=mockData.subTypeList;
			this.mMallCartGoods();
		},
		methods:{
			//2.2商品分类列表
			mMallCartGoods(){
				var _this=this;
				uni.request({
					url:this.$API.mMallCartGoods,
					method:"GET",
					header:this.$API.get_head(),
					success: (res) => {
						_this.typeList=res.data.rows;
						if(_this.typeId){
							_this.mMallGoods(_this.typeId);
							_this.typeList.forEach(function(v,i){
								if(_this.typeId == v.id){
									_this.typeActive = i
								}
							})
						}else{
							_this.mMallGoods(_this.typeList[0].id);
						}
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			//2.1.商品列表
			mMallGoods(c_id){
				var _this=this;
				uni.request({
					url:this.$API.mMallGoods,
					method:"GET",
					data:{
						page:this.page,
						rows:10,
						where:{"c_id":c_id}
					},
					header:this.$API.get_head(),
					success: (res) => {
						_this.subTypeList=res.data.rows;
						_this.subTypeList.forEach(function(v,i){
							_this.subTypeList[i].thumbnail =_this.baseURL+ v.cover_pic.split(',')[0]
						})
					},
					fail: () => {
						uni.showToast({
							title:"加载失败",
							icon:'none'
						})
					 }
				})
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			typeClickMain(categroy, index) {
				this.typeActive = index;
				this.page = 1;
				this.mMallGoods(categroy.id);
			},
			goProduct(id){
				uni.navigateTo({
					url:`/pages/shopPages/goods/detail/detail?id=`+id,
					// url:`/pages/shop/Goods_details`,
				})
			}
		}
		
		
	}
</script>
<style lang="scss">
	page{
		background-color: white
	}
	.page-body {
		display: flex;
	}
	
	
	.nav-left {
		width: 187.5upx;
	
		.nav-left-item {
			height: 100upx;
			font-size: 30upx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	
		.active {
			color: $theme-color;
			
		}
	}
	
	
	
	.nav-right {
		width: 562.5upx;
	
		.nav-right-item {
			width: 33.33%;
			height: 220upx;
			float: left;
			text-align: center;
			font-size: 28upx;
	
			image {
				width: 150upx;
				height: 150upx;
			}
		}
	}
</style>
